<template>
  <scroll-view
    class="full  border-box scroll-view-show"
    scroll-y="true"
    :scroll-top="0"
    upper-threshold="300"
  >
    <view class="flex container-fluid">
      <view class="row justify-content-center">
        <view class="col-lg-12 col-xl-10 col-xxl-8 p_sm">
          <div class="zero-state-container">
            <div class="grail">
              <div class="stance">
                <u-image
                  src="/static/images/logo@2x.png"
                  shape="circle"
                  mode="aspectFit"
                  width="32px"
                  height="32px"
                ></u-image>
              </div>
              <div class="content section pitch_xs">
                <div class="row">
                  <div class="heading h1">{{ $t('app.state.heading') }}</div>
                </div>
                <div class="row">
                  <div class="sub-heading">
                    {{ $t('app.state.subheading') }}
                  </div>
                </div>

                <div class="row">
                  <div class="align-items_center justify_between">
                    <div>{{ $t('app.state.hint') }}</div>
                    <div>
                      <!-- <u-button
                type="primary"
                icon="map"
                size="mini"
                :text="$t('app.state.refresh')"
              ></u-button> -->
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="grid column_2 reactive">
                    <div
                      class="grid-item p_xs"
                      v-for="item in topInstructionList"
                      :key="item.id"
                    >
                      <div class="prompt " @click="handleClick(item)">
                        <div class="align-items_center gap_xs">
                          <div class="h6">{{ item.question }}</div>
                        </div>
                        <div class="color_light">{{ item.chatgptAnswer }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="stance"></div>
              </div>
            </div>
          </div>
          <view :style="styles"></view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts">
import { computed, defineComponent, ref, nextTick } from 'vue';
import useInstructionStore from '@/store/modules/instruction';
import emitter from '@/utils/emitter';
import useChatStore from '@/store/modules/chat';

export default defineComponent({
  name: 'ZeroState',
  setup() {
    const instructionStore = useInstructionStore();
    const chatStore = useChatStore();
    const topInstructionList = computed(
      () => instructionStore.topInstructionList
    );

    const handleClick = item => {
      chatStore.generate({
        msg: item.question,
        addFileList: [],
        type: 1,
      });
    };

    const styles = ref({
      paddingBottom: '88px',
    });
    emitter.on('inputChange', (height: number) => {
      nextTick(() => {
        styles.value.paddingBottom = `${height ? height + 44 : 90}px`;
      });
    });

    return {
      topInstructionList,
      handleClick,
      styles,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.zero-state-container {
  border-radius: $radius;
  background: $white-color;
  padding: map-get($spaces, sm);
}

.grail {
  display: flex;
  align-items: flex-start;
  gap: map-get($spaces, sm);
  .content {
    flex: 1;
  }
  .stance {
    width: 40px;
  }
}

.prompt {
  border-radius: $radius;
  padding: map-get($spaces, xs);
  background: #f6f8fe;
  cursor: pointer;
}

.heading {
  color: map-get($text-colors, default);
}

.sub-heading {
  color: map-get($text-colors, light);
}
</style>
